<template>
    <div class="wh-full flex flex-col flex-1">
      <div class="page-top cus-scroll-y relative bg-#fff" flex>
        <div class="anchor-content w-170px">
          <div
            v-for="(item, index) in anchorList"
            :key="index"
            class="anchor-link mb-10px text-14px"
            :href="item.href"
          >
            <el-button
              :type="item.active ? 'primary' : 'default'"
              @click="tabClick(item, index)"
            >
              <span class="w-130px text-14px">{{ item.title }}</span>
            </el-button>
          </div>
        </div>
        <div class="page-content flex-1">
         
          <div class="ab-btn top-10px right-10px absolute z-100">
            <slot name="abBtn"></slot>
          </div>
          <slot></slot>
        </div>
      </div>
      <!-- <div
        class="page-bottom dark:border-dark-100 flex items-center justify-center bg-#fff"
      >
        <slot name="bottom"></slot>
      </div> -->
    </div>
</template>

<script setup>
import { useVModel } from '@vueuse/core'
const props = defineProps({
  showFooter: {
    type: Boolean,
    default: false
  },
  showHeader: {
    type: Boolean,
    default: true
  },
  title: {
    type: String,
    default: undefined
  },
  anchorList: {
    type: Array,
    default: () => []
  }
})
const emit = defineEmits(['update:anchorList'])
const comValue = useVModel(props, 'anchorList', emit)
const tabClick = (item, index) => {
  comValue.value.forEach(item => {
    item.active = false
  })
  comValue.value[index].active = true
  document.querySelector(item.href).scrollIntoView({
    behavior: 'smooth',
    block: 'start'
  })
}
</script>
<style lang="scss" scoped>
:deep(.n-card__content) {
  display: flex;
  flex-direction: column;
}
.page-top {
  // background-color: #fff;
  padding: 10px;
  flex: 1;
}
.page-bottom {
  background-color: #fff;
  border-top: 1px solid #ebeef5;
  height: 48px;
  padding: 10px 0;
  box-sizing: border-box;
}
</style>
